import React, { Component } from 'react'
import { Input, Button, List } from 'antd';
import { connect } from 'react-redux'
import { changeInputAction, getListAction, additemAction, delitemAction } from './../../store/modules/Home/homeActiveCreate'

class Home extends Component {
    componentDidMount() {
        this.props.getListFn()
    }
    render() {
        return (
            <div className='content'>
                <div style={{ margin: '10px' }}>
                    <Input
                        style={{ width: '250px' }}
                        value={this.props.inputValye}
                        onChange={this.props.changeInputValueFn}
                    />
                    <Button type="primary" onClick={this.props.addItem}>增加</Button>
                </div>
                <div style={{ width: '250px', marginLeft: '10px' }}>
                    <List
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item, index) => (<List.Item onClick={() => { this.props.delItem(index) }}>{item.title}</List.Item>)}
                    />
                </div>
            </div>
        )
    }
}


const stateToProps = (state) => {
    console.log('home', state);
    return {
        inputValye: state.home.inputValue,
        list: state.home.list,
    }
}

const dispatchToProps = (dispatch) => {
    return {
        changeInputValueFn: (e) => {
            dispatch(changeInputAction(e.target.value))
        },
        getListFn: () => {
            dispatch(getListAction)
        },
        addItem: () => {
            dispatch(additemAction())
        },
        delItem: (i) => {
            dispatch(delitemAction(i))
        }
    }
}


export default connect(stateToProps, dispatchToProps)(Home)